<template>
  <div>
    <a @click="showModal">{{ text }}</a>
    <a-modal 
      :title="text"
      centered
      :maskClosable="false"
      :width="1000"
      v-model="visible"
      :okText="$t('modal_submit')"
      :cancelText="$t('modal_cancel')"
      @ok="handleOk"
      :okButtonProps="okButtonProps"
    >
      <a-form :form="form">
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" :label="$t('param_code')"
        >
          <a-input disabled v-decorator="['paramCode',{ initialValue:row.paramCode,  }]" :placeholder="$t('param_code')" />
        </a-form-item>

        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" :label="$t('param_name')"
        >
          <a-input disabled v-decorator="['paramName',{ initialValue:row.paramName,  }]" :placeholder="$t('param_code')" />
        </a-form-item>

        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" :label="$t('param_value')"
        >
          <a-textarea
            :rows="12"
            v-decorator="[
              'paramValue',
              { initialValue: prettyJson(row.paramValue), rules: [{ required: true, message: $t('please_input') + $t('param_value') + $t('exclamation_mark') }] }
            ]"
          />
        </a-form-item>

      </a-form>
    </a-modal>
  </div>
</template>
<script>
import axios from 'axios'
import common from '@/global/common.js'
export default {
  props: {
    text: { type: [String] },
    callback: { type: [Function] },
    row: { type: [Object], default: () => { return {} } },
  },
  data() {
    return {
      form: this.$form.createForm(this, {name: 'paramForm'}),
      data: [],
      visible: false,
      okButtonProps: {},
      labelCol: {span: 4},
      wrapperCol: {span: 18},
    }
  },
  methods: {
    prettyJson(jsonStr) {
      return common.prettyJson(jsonStr)
    },
    showModal() {
      this.form.resetFields();
      this.visible = true
      this.okButtonProps = {}
    },
    handleOk() {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return;
        }
        
        this.okButtonProps ={ props: {disabled: true} }
        // submit
        axios({
          method: 'post',
          url: '/infra/param/update',
          data: {
            id: this.row.id,
            ...formValue
          },
        }).then(() => {
          this.visible = false
          if(this.callback) {
            this.callback();
          }
          this.$success({
            title: this.$t('success_message'),
            content: this.$t('submit_success'),
            okText: this.$t('modal_ok'),
          });
        }).catch(() => {
          this.okButtonProps = {}
        });
        
      });
    },
  }
}
</script>
